<template>
	<view>
		<view class="content">
			<view class="uimg">
				<button :plain="true" class="btn_ads" open-type="chooseAvatar" @chooseavatar='chooseavatar'></button>
				<image class="imgs" :src="data.userinfo.headImg?data.userinfo.headImg:'/static/avater.png'" mode=""></image>
				<image class="uicon" src="/static/x.png" mode=""></image>
			</view>

			<view class="items">
				<view class="item_l">昵称</view>
				<view class="item_r">
					<view class="act">
						<input type="nickname" placeholder="请输入昵称" @change="getNickname" @confirm='confirminput'
							v-model="data.userinfo.nickName" maxlength="7" />
					</view>
					<uni-icons type="right" size='16'></uni-icons>
				</view>
			</view>
			<view class="items">
				<view class="item_l">手机号</view>
				<view class="item_r">
					<view class="">{{data.userinfo.phone?data.userinfo.phone:''}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="cont">
				<view class="btn" @click="handleConfirm">
					保存
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		setUserInfo,getUserInfo
	} from '@/common/http.api.js'
import { reactive } from 'vue';
	
	
	const data = reactive({
		userinfo:{
			nickName:'',
			headImg:'',
			phone:''
		}
		
	})
	onLoad(()=>{
		getUserInfo({}).then(res=>{
			console.log(res);
			data.userinfo = res.data
		})
	})

	function getNickname(e) {
		console.log(e.detail.value, '123');
	}
	//更换头像
	function chooseavatar(e) {
		uni.uploadFile({
			url: getApp().globalData.BASEURL + '/common/upload', // 后台上传接口
			filePath: e.detail.avatarUrl, // 上传图片 url
			name: 'file',
			header: {
				'Content-Type': 'multipart/form-data',
				'Authorization': uni.getStorageSync('goodToken')
			},
			success: (res) => {
				let reject = JSON.parse(res.data)
				data.userinfo.headImg = reject.url
			}
		});
	}
	function handleConfirm() {
		if (data.userinfo.nickName == '') {
			uni.showToast({
				title: '输入昵称',
				icon: 'none'
			})
			return
		}
		if (data.userinfo.headImg == '') {
			uni.showToast({
				title: '上传图像',
				icon: 'none'
			})
			return
		}

	 setUserInfo({
			nickName: data.userinfo.nickName,
			headImg: data.userinfo.headImg
		}).then(r => {
			if (r.code == 200) {
				uni.showToast({
					title: '信息已修改',
					icon: 'none'
				})
			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #FBFBFB;
	}

	.content {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 24rpx 20rpx;
		box-sizing: border-box;

		.uimg {
			width: 180rpx;
			height: 180rpx;
			background: #F3F3F3;
			border-radius: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 50rpx auto 50rpx;
			position: relative;

			image {
				width: 116rpx;
				height: 116rpx;
			}

			.imgs {
				width: 180rpx;
				height: 180rpx;
				border-radius: 90rpx;
			}

			.btn_ads {
				position: absolute;
				width: 180rpx;
				height: 180rpx;
				border: none;
			}

			.uicon {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				right: 0%;
				bottom: 0%;
			}
		}

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 50rpx;

			.item_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				span {
					color: #D1CDCD !important;
				}
			}

			.item_r {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				.act {
					input {
						text-align: right;
					}
				}
			}
		}

		.items:last-child {
			margin-bottom: 30rpx;
		}
	}

	.footer {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			padding: 30rpx 30rpx 10rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			height: 120rpx;
			color: #000000;

			.btn {
				width: 700rpx;
				height: 80rpx;
				background: #FF7700;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>